<template>
<view>
<!-- tab切换 -->
<view class="container">
  <view v-for="(item, index) in catList" :key="index" class="containerList" @tap="onChange" :data-index="index">
    <view>
      <text :class="index == isChange ? 'active' : ''">{{item.cat_name}}</text>
    </view>
  </view>
</view>
<!-- 轮播 -->
<view>
  <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image mode="widthFix" :src="item.ad_pic" class="slide-image"></image>
      </swiper-item>
  </swiper>
</view>
<!-- 积分商品列表 -->
<view class="shop">
  <view v-for="(item, index) in shopList" :key="index" class="shopLists" @tap="toxiangqing" :data-index="index">
    <view class="height"><image mode="widthFix" :src="item.thumb_img"></image></view>
    <view class="content">
    <view>{{item.goods_name}}</view>
    <view style="color:red">{{item.price}}积分 </view>
    <view v-if="item.integral_price>0" style="color:red">+{{item.integral_price}}元 </view>
    </view>
  </view>
</view>
</view>
</template>

<script>
// hotmall/packageB/integralshop/integralshop.js
import api from "../../../api";
var app = getApp();

export default {
  data() {
    return {
      // 轮播图列表
      bannerList: [],
      // 兑换分类列表
      catList: [],
      // 兑换商品列表
      shopList: [],
      // 选项卡切换参数
      isChange: '0',
      // uniacid
      requestShopId: '',
      // 轮播属性数值
      indicatorDots: false,
      autoplay: false,
      interval: 5000,
      duration: 1000
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    this.getUnicodeid();
  },
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {// this.banList();
    // this.getList();
    // wx.stopPullDownRefresh()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {} //跳转商品详情页
  // spxq:function(event){
  //    var index = event.currentTarget.dataset.gid
  //    wx.navigateTo({
  //       url: '../../packageA/rushdetails/rushdetails?goods_id=' + this.data.bannerList[index].ad_id + '&img=' + this.data.bannerList[index].ad_pic
  //    })
  // }
  ,
  methods: {
    //跳转积分兑换商品详情
    toxiangqing(e) {
      let that = this;
      let index = e.currentTarget.dataset.index;
      wx.navigateTo({
        url: '../IntegralDetailsOfCommodities/IntegralDetailsOfCommodities?integral_id=' + that.shopList[index].integral_id + '&img=' + that.shopList[index].thumb_img
      });
    },

    // tab选项卡
    onChange(e) {
      console.log(e.currentTarget.dataset.index);
      this.setData({
        isChange: e.currentTarget.dataset.index
      });
      this.getList();
    },

    // 获取请求Unicodeid
    getUnicodeid() {
      var that = this;
      wx.getStorage({
        key: 'requestShopId',
        success: function (res) {
          console.log(res);
          that.setData({
            requestShopId: res.data
          });
          that.banList();
          that.getcatId();
        }
      });
    },

    //获取标题轮播
    banList: function () {
      let that = this;
      app.globalData.request({
        url: api.default.banner_list,
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 'content-type': 'application/json'

        },
        data: {
          id: 64,
          uniacid: that.requestShopId.uniacid,
          acid: that.requestShopId.acid,
          version: that.requestShopId.version,
          platform: 'wx'
        },
        method: 'POST',
        success: res => {
          console.log(res);
          that.setData({
            bannerList: res
          });
          console.log(that.bannerList);
          that.getcatId();
        }
      });
    },

    // 获取积分商品列表id
    getcatId() {
      let that = this;
      wx.request({
        url: api.default.integral_banner,
        method: 'POST',
        data: {
          uniacid: that.requestShopId.uniacid,
          acid: that.requestShopId.acid,
          version: that.requestShopId.version,
          platform: 'wx'
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 'content-type': 'application/json'

        },
        success: res => {
          console.log(res);
          that.setData({
            catList: res.data.cat
          });
          that.getList();
        }
      });
    },

    //获取商品数据
    getList: function () {
      let that = this;
      wx.request({
        url: api.default.integral_shop,
        method: 'POST',
        data: {
          cat_id: that.catList[that.isChange].cat_id,
          page: 1,
          uniacid: that.requestShopId.uniacid,
          acid: that.requestShopId.acid,
          version: that.requestShopId.version,
          platform: 'wx'
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: res => {
          console.log(res);
          that.setData({
            shopList: res.data.integral_list
          });
        }
      });
    }
  }
};
</script>
<style>
@import "./integralshop.css";
</style>